<template>
  <el-col :span="span" style="height: 150px;overflow: hidden;">
    <lableName    :validrule="validrule"    :curLabelName="labelName" :isShowLabel="isShowLabel" :isRequire="isRequire"></lableName>
    <!-- <div class="demo-image__preview">
      <img style="width: 100px; height: 100px" :src="url"/>
    </div> -->
    <el-upload
      :action="action"
      :accept="accepttype"
      :auto-upload="isautoupload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :http-request="handleChange"
      :file-list="fileList"
      :disabled="disabled"
    >
      <i class="el-icon-plus" v-if="!disabled"></i>
    </el-upload>
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <validateFormate :curLabelName="labelName" :validrule="validrule"></validateFormate>
  </el-col>
</template>

<script>
// import lableName from "@/components/lableName";
// import validateFormate from "@/components/validateFormate";
export default {
  name: "img",
  components: {
    lableName: () => import("@/components/lableName"), //标题溢出样式组件
    validateFormate: () => import("@/components/validateFormate"), //校验提示样式组件
  },
  props: {
    textField: { type: String, default: "" },
    codeField: { type: String, default: "" },
    action:{ type: String, default: "" },
    url: { type: String },
    labelName: { type: String, default: "证件照" },
    span: { type: Number, default: 6 },
    getVal: { type: String, default: "" },
    accepttype: { type: String, default: "" }, //文件类型限制
    isautoupload: { type: Boolean, default: false }, //是否自动上传
    limit: { type: Number, default: 1 }, //文件个数限制
    disabled:{ type: Boolean, default: false }, //是否禁用
    isRequire:{ type: Boolean, default: false }, //是否必填
    fileList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    getVal: {
      type: Array,
      default: function() {
        return [];
      }
    },
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      filess:[],
      thisurl:'',
    };
  },
  watch: {
    getVal(list) {
      this.fileList=list
      // this.filess=list
    }
  },
  methods:{
    handleChange(param) {
      let that=this
      let url='/mp/file/crm/upload.do'
      debugger
       that.$requestUpload(url, param)
        .then(response => {
          if (
            response.result === "1" &&
            response.path.length > 0 &&
            response.path[0].length > 0 &&
            response.path[0][0].indexOf("|") > -1
          ) {
            that.filess.push({ name: response.path[0][0].split("|")[0], path: response.path[0][0].split("|")[1] });
            that.$emit("emitCode", that.filess);
          }else{

          }
        })
    },
    handlePictureCardPreview(file){
      console.log(this.fileList)
      debugger
      this.dialogVisible=true;
      this.dialogImageUrl = file.url;

    },
    handleRemove(file, fileList){
      this.$emit("emitCode", []);
    },
  }
};
</script>
